<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="back">恢复</a>
</script>
<div style="padding-left: 20px;padding-right: 20px;margin-bottom: 150px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>角色管理</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">角色列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">角色添加</div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色名</label>
                            <div class="layui-input-block">
                                <input type="text" name="roleName" lay-verify="title" autocomplete="off" placeholder="请输入角色名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色描述</label>
                            <div class="layui-input-block">
                                <input type="text" name="roleDesc" lay-verify="title" autocomplete="off" placeholder="请输入角色描述" class="layui-input">
                            </div>
                        </div>
                        <div style="text-align: center">
                            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="add">确认添加</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">角色权限</div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择角色</label>
                            <div class="layui-input-block">
                                <select name="roleId" id="role" lay-verify="cose" lay-filter="role">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <blockquote class="layui-elem-quote">角色菜单权限(选择上方对象的角色，然后再选择下方的父子菜单，点击’添加权限‘即可为该角色添加对应权限)</blockquote>
                        <div class="layui-row">
                            <div class="layui-col-md4">
                                <fieldset class="layui-elem-field">
                                    <legend>当前所拥有的权限</legend>
                                    <div class="layui-field-box">
                                        <div id="test7" class="demo-tree"></div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择父菜单</label>
                                    <div class="layui-input-block">
                                        <select name="menuParentId" id="menuParent" lay-verify="cose" lay-filter="menuParentId">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择子菜单</label>
                                    <div class="layui-input-block">
                                        <select name="menuId" id="menuChild" lay-verify="cose" lay-filter="menuChildId">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div style="text-align: center">
                                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="addJur">添加权限</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /**
     *
     * layui.use(['form','table','tree'],function (){
     *       var form = layui.form,
            table = layui.table,
     * })
     *
     */
    layui.use(['form','table','tree'],function (){
        var form = layui.form,
            table = layui.table,
        tree = layui.tree;

        axios.get("/role/getRoleForAddUser").then(res => {
            var role = $("#role");
            role.children().remove();
            role.append('<option value=""></option>')
            for (const op of res.data.data) {
                role.append('<option value="'+op.id+'">'+'角色名称:'+op.roleName+',权限描述:' +op.roleDesc+'</option>')
            }
            form.render();
        })

        axios.post("/menu/get/parent").then(res => {
            var role = $("#menuParent");
            role.children().remove();
            role.append('<option value=""></option>')
            for (const op of res.data.data) {
                role.append('<option value="'+op.id+'">'+op.menuName+'</option>')
            }
            form.render();
        })

        form.on('select(role)',function (data) {
            var roleId = data.value;
            axios.post("/menu/getByUserRoleMenu/" + data.value).then(res => {
                data2 = res.data.data;
                // 开启复选框
                tree.render({
                    elem: '#test7'
                    ,data: data2
                    ,edit: ['del']
                    ,accordion: true
                    ,operate: function(obj) {
                        var type = obj.type; //得到操作类型：add、edit、del
                        var data = obj.data; //得到当前节点的数据
                        var elem = obj.elem; //得到当前节点元素

                        //Ajax 操作
                        var id = data.id; //得到节点索引
                        if (type === 'add') { //增加节点
                            //返回 key 值
                            return 123;
                        } else if (type === 'update') { //修改节点
                            console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                        } else if (type === 'del') { //删除节点
                            axios.post("/roleMenu/delete/" + data.id + "/" + roleId).then(res => {
                                layer.msg(res.data.msg);
                            })
                        }
                    }
                });
            })
        })

        form.on('submit(addJur)',function (data) {
            // 以下是执行区
            delete data.field.menuParentId;
            axios.post("/roleMenu/add",data.field).then(res => {
                layer.msg(res.data.msg);
            })
            // 返回 false代表不提交 如果是同步则不写 上面使用了异步请求
            // 所以返回 false
            return false;
        })

        form.on('select(menuParentId)',function (data) {
            axios.post("/menu/get/child/" + data.value).then(res => {
                var role = $("#menuChild");
                role.children().remove();
                role.append('<option value=""></option>')
                for (const op of res.data.data) {
                    role.append('<option value="'+op.id+'">'+op.menuName+'</option>')
                }
                form.render();
            })
        })

        var data2 = [];

        table.render({
            elem: '#test'
            , url: '/role/get'
            , cols: [
                [
                {type: 'numbers',title:'序号', fixed: 'left'}
                , {field: 'roleName', title: '角色名',edit: 'text'}
                , {field: 'roleDesc', title: '角色描述',edit: 'text'}
                , {field: 'status', title: '状态',templet:function (res) {
                        if(res.status == 1){
                            return "正常"
                        }
                        if(res.status == 0){
                            return "已删除"
                        }
                    }}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]
            ]
            , page: true
        });

        form.on('submit(add)',function (data) {
            axios.post("/role/add",data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false
        })

        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    axios.post("/role/delete/"+data.id).then(res => {
                        layer.msg(res.data.msg);
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                axios.post("/role/update",data).then(res => {
                    layer.msg(res.data.msg);
                })
            } else if(obj.event === 'back'){
                axios.post("/role/back/"+data.id).then(res => {
                    layer.msg(res.data.msg);
                })
            }
        });

        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            },
            cose: function(value){
                if(value.length < 1){
                    return '请选择选项哇';
                }
            }
        });

    })
</script>
</html>
